<template>
  <div>
    <head-top></head-top>
    <div class="table_container">
      <el-table
        :columns="columns"
        :data="tableList"
        v-loading="loading"
        element-loading-text="小猪猪正在玩命加载中，请稍候哦。。。"
        highlight-current-row>
        <el-table-column v-for="(column, index) in columns" :key="index" :label="column.text" :width="column.width">
          <template slot-scope="scope">
            <template v-if="column.useSlot">
              <template v-if="column.value === 'operate'">
                <el-button @click="del(scope, scope.row)" type="text">删除</el-button>
                <el-button type="text" @click="test(scope.$index, scope.row)">修改</el-button>
              </template>
            </template>
            <template v-else>
              {{ scope.row[column.value] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total && total > 0"
        :current-page="currentPage"
        :page-sizes="[8, 16, 32, 64]"
        :page-size="pageSize"
        :total="total"
        layout="slot, jumper, sizes, next, pager, prev"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        <slot>
            <span>
              共{{ pageCount }}页 当前为第{{ currentPage }}页
            </span>
        </slot>
      </el-pagination>
      <el-dialog
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :append-to-body="true"
        title="编辑管理员账号"
        width="40%"
      >
        <el-form :model="adminEditForm" class="form-container">
          <div>
            <el-row>
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>管理员姓名：
                </div>
                <el-form-item>
                  <el-input v-model="adminEditForm.adminName" placeholder="请输入管理员姓名"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>联系电话：
                </div>
                <el-form-item class="c-form-info__item c-form-info__item80">
                  <el-input v-model="adminEditForm.phoneNumber" placeholder="请输入电话方式"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>注册地址：
                </div>
                <el-form-item>
                  <el-input readonly="true" v-model="adminEditForm.registerAddress" placeholder="请选择注册地址"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>注册日期:
                </div>
                <el-form-item>
                  <el-input readonly v-model="adminEditForm. registerDate" placeholder="请输入注册日期" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>管理员权限:
                </div>
                <el-form-item>
                  <el-input readonly v-model="adminEditForm.adminJudge" placeholder="请选择管理员权限" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit()">修改</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

    import HeadTop from '../components/head-top';
    const initForm = {
      adminName: '',
      phoneNumber: '',
      registerDate: '',
      registerAddress: '',
      adminJudge: ''
    }
    export default {
      components: { HeadTop },
      name: "admin-list",
      data () {
        return {
          total: 100,
          pageSize: 8,
          currentPage: 1,
          adminEditForm: Object.assign({}, initForm),
          testData: '',
          collapse: true,
          dialogVisible: false,
          adminList: [],
          loading: true,
          columns: [
            {
              text: '管理员姓名',
              value: 'adminName',
              width: 150
            },
            {
              text: '联系方式',
              value: 'phoneNumber',
              width: 150
            },
            {
              text: '注册地址',
              value: 'registerAddress',
              width: 350
            },
            {
              text: '注册日期',
              value: 'registerDate',
              width: 170,
            },
            {
              text: '权限',
              value: 'adminJudge',
              width: 170,
            },
            {
              text: '操作',
              value: 'operate',
              width: 180,
              fixed: 'right',
              useSlot: true
            }
          ]
        }
      },
      computed: {
        tableList() {
          return this.adminList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
      },
      created(){
        var url = this.HOME + '/admin/findalladmin';
        this.$axios.get(url)
          .then(res => {
          console.log(res.data.list);
        this.adminList = res.data.list;
        this.loading = false;
      }).catch(error => {
          console.log(error);
      });
      },
      methods: {
        // 切换每页显示条数
        handleSizeChange(val) {
          this.currentPage = 1
          this.pageSize = val
        },
        // 当前页改变
        handleCurrentChange(val) {
          this.currentPage = val
        },
        del(scope, row) {
          if (!scope.row.phoneNumber){
            this.tableList(scope.$index, 1)
          } else {
            this.$confirm('确认是否删除','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            })
              .then(() => {

              this.$axios.post(this.HOME + '/admin/deladmin',{phoneNumber: scope.row.phoneNumber}).then(res => {
              if(res.data.judge === true) {
              this.$message.success('删除成功')
              return this.tableList.splice(row,1);
            } else {
              this.$message.warning(res.data.msg)
            }
          })
          })
          .catch(() => {
              this.$message({type: 'info',
              message: '已取消删除'
            })
          })
          }
        },
        // 编辑账号
        test(index, row) {
          this.adminEditForm = row
          this.adminEditForm.phoneNumber = row.phoneNumber
          this.dialogVisible = true
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
            done()
            //location.reload()
          })
        .catch(_ => {
            //location.reload()
          })
        },
        edit() {
          this.dialogVisible = false
          location.reload()
        }
      }

    }
</script>

<style scoped>

</style>
